<template>
  <div class="app-container">
    <el-form ref="management" :inline="true" size="small" style="display:flex;justify-content: space-between">
      <el-form-item>
        <el-input placeholder="请输入用户名" v-model="queryParams.sername" style="width: 300px;">
          <el-button slot="append" icon="el-icon-search" @click="getlist"></el-button>
          <el-button slot="append" type="primary" icon="el-icon-refresh" round
                     @click="getlist"></el-button>
        </el-input>


      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">订阅</el-button>
      </el-form-item>


    </el-form>
    <el-table :data="subData">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="订阅用户" align="center" prop="userAccount" width="170" />
      <el-table-column label="订阅服务" align="center" prop="serviceName" width="250" />

      <el-table-column label="订阅时间" align="center" prop="createTime" width="180" >
        <template slot-scope="scope">
          {{ renderTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" width="200">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 0 ? 'danger' : 'success'" disable-transitions>{{
              scope.row.status == 0 ? '待审核' : "已审核" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-view" @click="handleClick(scope.row)">
          </el-button>
          <!-- <el-button size="mini" @click="handleUpdate(scope.row, scope.$index)" icon="el-icon-edit"
              ></el-button> -->
          <el-button size="mini" type="primary" icon="el-icon-s-claim"
                     @click="audit(scope.row)"></el-button>
          <el-button size="mini" icon="el-icon-delete" type="danger"
                     @click="handleDelete(scope.row)"></el-button>

        </template>
      </el-table-column>

    </el-table>
    <el-row>
      <el-col style="text-align:right">

        <pagination
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getlist"
        />
      </el-col>
    </el-row>
    <el-dialog :title="addTitle" :visible.sync="Open" width="500px" append-to-body>
      <el-form ref="addForm" :model="addForm" label-width="130px">
        <el-form-item label="订阅用户（账号）" prop="userAccount">
          <el-input v-model="addForm.userAccount" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="订阅服务（英文）" prop="serviceName">
          <el-input v-model="addForm.serviceName" placeholder="请输入名称" />
          <!-- <el-select v-model="addForm.serviceName" placeholder="请选择服务">
              <el-option label="信息查询接口" value="infouserInfoUpdate/V1.0.0"></el-option>
              <el-option label="信息更新接口" value="infouserInfoUpdate/V1.0.0"></el-option>
              <el-option label="信息删除接口" value="infouserInfoUpdate/V1.0.0"></el-option>
          </el-select> -->
        </el-form-item>
        <!-- <el-form-item label="订阅时间" prop="Time">
            <el-date-picker v-model="addForm.Time" type="datetime" placeholder="选择日期时间" align="right"
                :picker-options="pickerOptions">
            </el-date-picker>
        </el-form-item> -->


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addsub">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

    </el-dialog>
    <el-dialog :title="detailTitle" :visible.sync="ClickOpen" append-to-body>
      <el-descriptions direction="vertical" :column="2" border>
        <el-descriptions-item label="订阅用户账号" label-class-name="my-label">{{ ClickList.userAccount
          }}</el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" label="订阅服务（英文）">{{ ClickList.serviceId
          }}</el-descriptions-item>

        <el-descriptions-item label="状态"><el-tag :type="ClickList.status === 0 ? 'danger' : 'success'"
                                                   disable-transitions>{{
            ClickList.status == 0 ? '待审核' : "已审核" }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog :title="modifyTitle" :visible.sync="UpdateOpen" width="500px" append-to-body>
      <el-form ref="form" :model="modifyForm" label-width="130px">
        <el-form-item label="订阅用户" prop="User">
          <el-input v-model="modifyForm.User" :disabled="true" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="订阅服务" prop="Encoded">
          <el-input v-model="modifyForm.Encoded" placeholder="请输入编码" />
        </el-form-item>
        <el-form-item label="订阅时间" prop="Time">
          <el-date-picker v-model="modifyForm.Time" type="datetime" placeholder="选择日期时间" align="right"
                          :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="机构名称" prop="Name">
          <el-input v-model="modifyForm.Name" :disabled="true" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="服务地址" prop="Address">
          <el-input v-model="modifyForm.Address" placeholder="请输入地址" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>


    </el-dialog>


  </div>
</template>

<script>
import { getSubscribeListFn,selectlistFn, updateSubscribeListFn, addSubscribeListFn, deleteSubscribeListFn } from '../../../api/subscribe'
export default {
  data() {
    return {
      Open: false,
      total: 2,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sername:''
      },
      detailTitle: '详情',
      UpdateOpen: false,
      modifyTitle: '修改',
      sername: '',
      ClickOpen: false,
      addTitle: '新增订阅',
      auditOpen: false,
      auditTitle: '审核',
      dataList: {
        id: '',
        userId: '',
        serviceId: '',
        serviceName: '',
        userAccount: '',
        createTime: '',
        status: ''

      },
      addForm: {
        userAccount: '',
        serviceName: ''
      },
      modifyForm: {
        Id: '',
        User: '',
        Name: '',
        Encoded: '',
        Address: '',
        Time: '',
        State: '',
        StateList: [
          {
            value: '1',
            label: '已订阅'
          },
          {
            value: '2',
            label: '未订阅'
          }

        ]

      },
      auditForm: {
        id: null,
        userId: null,
        serviceId: '',
        status: 0,
        serviceName: '',
        userAccount: '',
        createTime: '',

      },


      subData: [
        // {
        //     Id: '1',
        //     User: '张三',
        //     Name: '信息查询接口',
        //     Encoded: '订阅服务',
        //     Address: 'infouserInfoUpdate/V1.0.0',
        //     Time: '2017-12-03 12:22:09',
        //     State: '未审核'


        // },
        // {
        //     Id: '2',
        //     User: '李四',
        //     Name: '信息查询接口',
        //     Encoded: '订阅服务',
        //     Address: 'infouserInfoUpdate/V1.0.0',
        //     Time: '2017-12-03 12:22:09',
        //     State: '未审核'


        // },
        // {
        //     Id: '3',
        //     User: '王五',
        //     Name: '信息查询接口',
        //     Encoded: '订阅服务',
        //     Address: 'infouserInfoUpdate/V1.0.0',
        //     Time: '2017-12-03 12:22:09',
        //     State: '未审核'


        // }
      ],
      ClickList: {
        Id: '',
        User: '',
        Name: '',
        Encoded: '',
        Address: '',
        Time: '',
        State: ''
      }

    }
  },
  methods: {
    audit: function (row) {
      console.log(row);
      this.auditForm = row;
      this.$modal.confirm('是否确认通过编号为"' + row.id + '"的数据项？').then(function () {
        return updateSubscribeListFn(row);
      }).then(() => {
        this.getlist()
        this.$modal.msgSuccess("审核成功");
      }).catch(() => { });


    },
    getlist() {
      this.loading = true;
      getSubscribeListFn(this.queryParams).then(response => {
        this.subData = response.rows;
        this.total = response.total;
        console.log(this.subData);
      })

    },
    selectlist(){

      selectlistFn(this.sername).then(response => {
        this.subData = response.rows;
        console.log(this.subData);

      })
    },
    renderTime(date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },



    // auditSuccess: function () {
    //     this.loading = true;
    //     // this.auditForm.State = 1;
    //     console.log(this.auditForm)
    //     this.$refs["auditForm"].validate(valid => {
    //         if (valid) {

    //             updateSubscribeListFn(this.auditForm).then(response => {
    //                 this.$modal.msgSuccess('审核成功');
    //                 this.auditOpen = false;
    //                 this.getlist();
    //             }).catch((error) => {
    //                 console.error(error);
    //             });

    //         }
    //     });
    // },

    handleAdd() {
      this.Open = true;
    },
    addsub: function () {
      console.log(this.addForm);
      this.$refs["addForm"].validate(valid => {
        if (valid) {
          addSubscribeListFn(this.addForm).then(response => {
            this.$modal.msgSuccess('添加成功');
            this.open = false;
            this.getlist()
          }).catch((error) => {
            console.error(error);
          });

        }
      });
    },

    handleDelete(row) {
      console.log(row.id);
      const id = row.id;
      this.$modal.confirm('是否确认删除编号为"' + id + '"的数据项？').then(function () {
        return deleteSubscribeListFn(id);
      }).then(() => {
        this.getlist()
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });




    },

    handleClick(row) {
      console.log(row);
      this.ClickOpen = true;
      this.ClickList = row;

    },
    handleUpdate(row, idx) {
      this.UpdateOpen = true;
      console.log(row);
      this.modifyForm = row;
      this.userIndex = idx;

    },
    cancel() {
      this.UpdateOpen = false;
      this.ClickOpen = false;
      this.auditOpen = false;
      this.Open = false;
    },
    confirm() {
      this.UpdateOpen = false;
      this.subData[this.userIndex] = this.modifyForm;
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }

    // handleSizeChange(val) {
    //     console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //     console.log(`当前页: ${val}`);
    // },
    // handleSizeChange(size) {
    //     //修改当前每页的数据行数
    //     this.pagesize = size;
    //     //数据重新分页
    //     this.getPageInfo();
    // },
    // handleCurrentChange(pageNumber) {
    //     //修改当前的页码
    //     this.currentpage = pageNumber;
    //     //数据重新分页
    //     this.getPageInfo()
    // },
    // getPageInfo() {
    //     //清空pageTicket中的数据
    //     this.subData = [];
    //     // 获取当前页的数据
    //     for (let i = (this.currentpage - 1) * this.pagesize; i < this.total; i++) {
    //         //把遍历的数据添加到pageTicket里面
    //         this.subData.push(this.ticket[i]);
    //         //判断是否达到一页的要求
    //         if (this.subData.length === this.pagesize) break;
    //     }
    // },

  },
  created() {
    this.getlist();
  },
  computed: {
    pickerOptions() {
      // 用计算属性
      let _this = this
      // 此时 this指向的就是vue实例
      return {
        disabledDate(time) {
          console.log(_this)//这里可以拿到this了
          return time.getTime() > Date.now()
        }
      }
    }
  }


}
</script>

<style scoped>
.el-input {
  width: 430px;
}

/* .my-label {
    background-color: #a4cff7;
} */
.audit {
  margin-left: 40%;


}

.auditFail {
  margin-left: 5%;


}
</style>
